<template>
  <div class="app-container">
    <div v-if="groupProp">
      <el-button type="primary" @click="updateActivity()" v-if="currentAdmin>0">保存</el-button>
      <div class="pdx-10 pdb-50" style="color: rgb(0 139 88);">
        <div class="justify-content">
          <span>人员信息:</span><span
            v-if="groupProp.createTime">活动时间:{{
            format(new Date(groupProp.createTime), 'yyyy-MM-dd HH:mm:ss')
          }}</span></div>
        <div>
          <div>

            <div>
              <table>
                <thead style="left: 0;">
                <tr>
                  <th>人数：<input :class="'hide-input-text'" disabled style="width: 35px;"
                                  v-model.number="computeNum"/></th>
                  <th>男生：<input :class="'hide-input-text'" disabled style="width: 35px;"
                                  v-model.number="groupProp.fullMaleNum"
                                  @change="calculate(0)"/></th>
                  <th>女生：<input :class="'hide-input-text'" disabled style="width: 35px;"
                                  v-model.number="groupProp.fullFemaleNum"
                                  @change="calculate(0)"/></th>
                  <th>半男：<input :class="'hide-input-text'" disabled style="width: 35px;"
                                  v-model.number="groupProp.halfMaleNum" @change="calculate(0)"/>
                  </th>
                  <th>半女：<input :class="'hide-input-text'" disabled style="width: 35px;"
                                  v-model.number="groupProp.halfFemaleNum" @change="calculate(0)"/>
                  </th>
                  <th>飞机：<input :class="'hide-input-text'" disabled style="width: 35px;"
                                  v-model.number="groupProp.fullAbsentNum " @change="calculate(0)"/>
                  </th>
                  <th>半飞：<input :class="'hide-input-text'" disabled style="width: 35px;"
                                  v-model.number="groupProp.halfAbsentNum " @change="calculate(0)"/>
                  </th>
                </tr>
                </thead>
              </table>
            </div>
            <div v-show="checkCollectType(groupProp.collectType,0)">
              <div>女生特惠:<input v-model.number=" groupProp.femaleDiscountPrice" @change="calculate(1)" type="number"/>
              </div>
              <div>每桶球价:<input @change="calculate(0)" v-model.number=" groupProp.bucketPerPrice" type="number"/>
              </div>
              <div>每桶球数:<input @change="calculate(0)" v-model.number=" groupProp.bucketBallNum" type="number"/>
              </div>
              <div>用球数量:<input @change="calculate(0)" v-model.number=" groupProp.costBallNum" type="number"/></div>
              <div>场地数量:<input @change="calculate(0)" v-model.number=" groupProp.siteNum" type="number"/></div>
              <div>活动时长:<input @change="calculate(0)" v-model.number=" groupProp.timeLength" type="number"/></div>
              <div>场地单价:<input @change="calculate(0)" v-model.number=" groupProp.sitePerPrice" type="number"/></div>
              <div>场地花费:<input @change="calculate(1)" v-model.number=" groupProp.siteTotalCost" type="number"/>
              </div>
              <div>用球花费:<input @change="calculate(1)" v-model.number="groupProp.ballTotalCost" type="number"/></div>
              <div>总共花费:<input @change="calculate(1)" v-model.number="groupProp.totalCost" type="number"/></div>
              <div>额外每人:<input type="number" @change="calculate(1)" v-model.number="groupProp.extraPerCost"/></div>
              <div>额外固定:<input type="number" @change="calculate(1)" v-model.number="groupProp.extraFixedCost"/>
              </div>
            </div>
            <div v-show="checkCollectType(groupProp.collectType,1)">
              <div>固定男生:<input @change="calculate(1)" v-model.number=" groupProp.fixedMale"/></div>
              <div>固定女生:<input @change="calculate(1)" v-model.number=" groupProp.fixedFemale"/></div>
            </div>
          </div>
          <el-table :data="['男','女']" style="width: 80%">
            <el-table-column label="性别" align="center">
              <template #default="scope">
                {{ scope.row }}
              </template>
            </el-table-column>
            <el-table-column label="全程" align="center">
              <template #default="scope">
                {{
                  scope.row === '男' ? Number(groupProp.fullMaleCost ? groupProp.fullMaleCost : 0).toFixed(2) : Number(groupProp.fullFemaleCost ? groupProp.fullFemaleCost : 0).toFixed(2)
                }}
              </template>
            </el-table-column>
            <el-table-column label="半程" align="center">
              <template #default="scope">
                {{
                  scope.row === '男' ? Number(groupProp.maleHalfCost ? groupProp.maleHalfCost : 0).toFixed(2) : Number(groupProp.femaleHalfCost ? groupProp.femaleHalfCost : 0).toFixed(2)
                }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <h2>各成员球费</h2>
        <el-button size="small" type="primary" @click="copy"> 一键复制</el-button>
        <el-table :data="activityParticipateList" style="width: 80%">
          <el-table-column label="姓名" align="center" prop="userName"/>
          <el-table-column label="性别" align="center">
            <template #default="scope">
              <dict-tag :options="sys_user_sex" :value="scope.row.sex"/>
            </template>
          </el-table-column>
          <el-table-column label="只A场费(飞机)" align="center" >
            <template #default="scope">
              <el-checkbox v-model="scope.row.onlySite" :true-value=1 :false-value=0 size="large"
                           @change="onlySite(scope.row)"/>
            </template>
          </el-table-column>
          <el-table-column label="免费" align="center">
            <template #default="scope">
              <el-checkbox v-model="scope.row.feeCharge" :true-value=1 :false-value=0 size="large"
                           @change="ChangeFeeCharge(scope.row)"/>
            </template>
          </el-table-column>
          <el-table-column label="半程" align="center">
            <template #default="scope">
              <el-checkbox v-model="scope.row.halfFlag" size="large" :true-value=1 :false-value=0
                           @change="fullChange(scope.row)"/>
            </template>
          </el-table-column>
          <el-table-column label="花费" align="center" prop="cost"/>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup name="calculate">
import {format} from "date-fns";
import * as activityService from "@/api/group/actRecord.js";
import useClipboard from "vue-clipboard3";
import {findOneCurrentIdGroupId} from "@/api/group/ref.js";
import {AES_Decrypt, AES_Encrypt} from "@/utils/jsencrypt.js";

const {proxy} = getCurrentInstance();
const {
  sys_user_sex
} = proxy.useDict("sys_user_sex");
const route = useRoute();
const router = useRouter();
const {toClipboard} = useClipboard()
const activityParticipateList = ref([])
const groupProp = ref({});
const currentAdmin = ref(0)
const computeNum = ref(1);
const onlySiteFullCost = ref(0);
const onlySiteHalfCost = ref(0);
const activityId = ref(Number(AES_Decrypt(route.query.activityId)) === 0 ? undefined : Number(AES_Decrypt(route.query.activityId)));
const groupId = ref(Number(AES_Decrypt(route.query.groupId)) === 0 ? undefined : Number(AES_Decrypt(route.query.groupId)));
const checkCollectType = (collectType, number) => {
  return Number(collectType) === number
}
const changeCost = (item) => {
  if (item.feeCharge == 1) {
    item.cost = 0
  } else {
    if (item.halfFlag) {
      //console.log("修改费用", item.halfFlag, item.sex, groupProp.value.maleHalfCost, groupProp.value.femaleHalfCost, onlySiteHalfCost.value)
      if (item.onlySite) {
        item.cost = +(onlySiteHalfCost.value ? onlySiteHalfCost.value : 0).toFixed(2)
      } else {
        if (item.sex === 1) {
          item.cost = +(groupProp.value.maleHalfCost ? groupProp.value.maleHalfCost : 0).toFixed(2)
        } else {
          item.cost = +(groupProp.value.femaleHalfCost ? groupProp.value.femaleHalfCost : 0).toFixed(2)
        }
      }
    } else {
      if (item.onlySite) {
        item.cost = +(onlySiteFullCost.value ? onlySiteFullCost.value : 0).toFixed(2)
      } else {
        if (item.sex === 0) {
          item.cost = Number(groupProp.value.fullFemaleCost ? groupProp.value.fullFemaleCost : 0).toFixed(2)
        } else {
          item.cost = Number(groupProp.value.fullMaleCost ? groupProp.value.fullMaleCost : 0).toFixed(2)
        }
      }
    }
  }
}
const onlySite = (item) => {
  console.log(item);
  if (!item.feeCharge) {
    if (item.onlySite) {
      if (item.halfFlag) {
        if (item.sex === 1) {
          groupProp.value.halfMaleNum -= 1
        } else {
          groupProp.value.halfFemaleNum -= 1
        }
        groupProp.value.halfAbsentNum += 1
      } else {
        if (item.sex === 1) {
          groupProp.value.fullMaleNum -= 1
        } else {
          groupProp.value.fullFemaleNum -= 1
        }
        groupProp.value.fullAbsentNum += 1
      }
    } else {
      if (item.halfFlag) {
        if (item.sex === 1) {
          groupProp.value.halfMaleNum += 1
        } else {
          groupProp.value.halfFemaleNum += 1
        }
        groupProp.value.halfAbsentNum -= 1
      } else {
        if (item.sex === 1) {
          groupProp.value.fullMaleNum += 1
        } else {
          groupProp.value.fullFemaleNum += 1
        }
        groupProp.value.fullAbsentNum -= 1
      }
    }
    if (item.onlySite) {
      item.onlySite = 1
    } else {
      item.onlySite = 0
    }
    console.log("item.onlySite", item.onlySite);
    console.log("item", item);
    calculate(1)
    console.log("item", item);
  }
}

const calculate = (count) => {
  //console.log("计算球费---", groupProp.value.collectType, count)
  computeNum.value = +((groupProp.value.fullMaleNum ? groupProp.value.fullMaleNum : 0)
      + (groupProp.value.fullFemaleNum ? groupProp.value.fullFemaleNum : 0)
      + (groupProp.value.halfMaleNum ? groupProp.value.halfMaleNum : 0)
      + (groupProp.value.halfFemaleNum ? groupProp.value.halfFemaleNum : 0)
      + (groupProp.value.halfAbsentNum ? groupProp.value.halfAbsentNum : 0)
      + (groupProp.value.fullAbsentNum ? groupProp.value.fullAbsentNum : 0)
  )
  //console.log("计算人数---", computeNum.value, groupProp.value.halfAbsentNum, groupProp.value.fullAbsentNum, groupProp.value.fullMaleNum, groupProp.value.fullFemaleNum)
  if (groupProp.value.collectType === 0) {
    if (count !== 1) {
      groupProp.value.siteTotalCost = (groupProp.value.siteNum * groupProp.value.sitePerPrice * groupProp.value.timeLength) ? //场地费用
          +(groupProp.value.siteNum * groupProp.value.sitePerPrice * groupProp.value.timeLength).toFixed(2) : 0
      groupProp.value.ballTotalCost = ((groupProp.value.bucketPerPrice / groupProp.value.bucketBallNum) * groupProp.value.costBallNum) ? //用球费用
          +((groupProp.value.bucketPerPrice / groupProp.value.bucketBallNum) * groupProp.value.costBallNum).toFixed(2) : 0

    }
    groupProp.value.totalCost = +((groupProp.value.siteTotalCost ? groupProp.value.siteTotalCost : 0) + //场地+球费
        (groupProp.value.ballTotalCost ? groupProp.value.ballTotalCost : 0)).toFixed(2)
    if (computeNum.value > 0 && groupProp.value.totalCost) {
      let computeTotalCost = groupProp.value.totalCost  //用于计算的费用
      //console.log("总费用/人", computeTotalCost, computeNum.value)
      //只收场地费用的
      if (groupProp.value.halfAbsentNum > 0 || groupProp.value.fullAbsentNum > 0) {
        onlySiteFullCost.value = (groupProp.value.siteTotalCost / computeNum.value)
        //console.log("onlySiteFullCost--", onlySiteFullCost.value)
        onlySiteHalfCost.value = onlySiteFullCost.value / 2
        computeTotalCost = computeTotalCost - onlySiteFullCost.value * groupProp.value.fullAbsentNum - onlySiteHalfCost.value * groupProp.value.halfAbsentNum
      }

      if (groupProp.value.extraFixedCost) {
        computeTotalCost = groupProp.value.totalCost + groupProp.value.extraFixedCost
        //console.log("额外总费用", groupProp.value.totalCost)
      }
      // let computeTotalCost = (groupProp.value.siteTotalCost ? groupProp.value.siteTotalCost : 0) + (groupProp.value.ballTotalCost ? groupProp.value.ballTotalCost : 0)
      let computeMaleNum = Number(groupProp.value.fullMaleNum) //计算男生数量
      let computeFemaleNum = Number(groupProp.value.fullFemaleNum) //计算女生数量
      if (groupProp.value.halfMaleNum) {
        computeMaleNum = computeMaleNum + groupProp.value.halfMaleNum / 2 //两半男生算一个男生
      }
      if (groupProp.value.halfFemaleNum) {
        computeFemaleNum = computeFemaleNum + groupProp.value.halfFemaleNum / 2 //两个半女生算一个女生
      }
      if (groupProp.value.femaleDiscountPrice && computeFemaleNum) {
        computeTotalCost = computeTotalCost + groupProp.value.femaleDiscountPrice * computeFemaleNum //女生特惠
      }
      groupProp.value.fullMaleCost = ((computeTotalCost / (computeMaleNum + computeFemaleNum)) + (groupProp.value.extraPerCost ? groupProp.value.extraPerCost : 0)).toFixed(2)
      groupProp.value.maleHalfCost = (groupProp.value.fullMaleCost / 2)
      groupProp.value.fullFemaleCost = (groupProp.value.fullMaleCost - groupProp.value.femaleDiscountPrice).toFixed(2)
      groupProp.value.femaleHalfCost = (groupProp.value.fullFemaleCost / 2)
    }
  } else {
    groupProp.value.fullMaleCost = Number(groupProp.value.fixedMale ? groupProp.value.fixedMale : 0).toFixed(2)
    groupProp.value.maleHalfCost = groupProp.value.fixedMale / 2
    groupProp.value.fullFemaleCost = Number(groupProp.value.fixedFemale ? groupProp.value.fixedFemale : 0).toFixed(2)
    groupProp.value.femaleHalfCost = groupProp.value.fixedFemale / 2
  }
  activityParticipateList.value.forEach(item => {
    changeCost(item)
  });
}
const getAdmin = () => {
    findOneCurrentIdGroupId({
      groupId: groupId.value,
    }).then(res => {
      if (res.data) {
        currentAdmin.value = res.data.adminType
      }
    }).then(() => {
      resolve()
    })
}
getAdmin();
const ChangeFeeCharge = (item) => {
  //console.log("免费---", item.feeCharge)
  if (item.feeCharge) {
    //console.log("免费---1", item.halfFlag)
    if (item.halfFlag) { // 半程
      if (item.onlySite) {  // 收场地费用
        groupProp.value.halfAbsentNum = groupProp.value.halfAbsentNum - 1
      } else {
        if (item.sex === 1) {
          groupProp.value.halfMaleNum -= 1
        } else {
          groupProp.value.halfFemaleNum -= 1
        }
      }
    } else {
      if (item.onlySite) {  // 收场地费用
        groupProp.value.fullAbsentNum = groupProp.value.fullAbsentNum - 1
      } else {
        if (item.sex === 1) {
          groupProp.value.fullMaleNum -= 1
        } else {
          groupProp.value.fullFemaleNum -= 1
        }
      }
    }
    groupProp.value.feeNum = groupProp.value.feeNum + 1
    item.cost = 0
  } else {
    //console.log("收费---1", item.feeCharge)
    if (item.halfFlag) { // 半程
      if (item.onlySite) {  // 收场地费用
        groupProp.value.halfAbsentNum = groupProp.value.halfAbsentNum + 1
      } else {
        if (item.sex === 1) {
          groupProp.value.halfMaleNum += 1
        } else {
          groupProp.value.halfFemaleNum += 1
        }
      }
    } else {
      if (item.onlySite) {  // 收场地费用
        groupProp.value.fullAbsentNum = groupProp.value.fullAbsentNum + 1
      } else {
        if (item.sex === 1) {
          groupProp.value.fullMaleNum += 1
        } else {
          groupProp.value.fullFemaleNum += 1
        }
      }
    }

    groupProp.value.feeNum = groupProp.value.feeNum - 1
  }
  item.feeCharge = item.feeCharge ? 1 : 0
  calculate(1)
}

const fullChange = (item) => {
  if (!item.feeCharge) {
    //console.log("半程", item.halfFlag)
    if (item.halfFlag) {
      if (item.onlySite) {  // 收场地费用
        groupProp.value.fullAbsentNum -= 1
        groupProp.value.halfAbsentNum += 1
      } else {
        if (item.sex === 1) {
          groupProp.value.fullMaleNum -= 1
          groupProp.value.halfMaleNum += 1
        } else {
          groupProp.value.fullFemaleNum -= 1
          groupProp.value.halfFemaleNum += 1
        }
      }
    } else {
      if (item.onlySite) {  // 收场地费用
        groupProp.value.halfAbsentNum -= 1
        groupProp.value.fullAbsentNum += 1
      } else {
        if (item.sex === 1) {
          groupProp.value.fullMaleNum += 1
          groupProp.value.halfMaleNum -= 1
        } else {
          groupProp.value.fullFemaleNum += 1
          groupProp.value.halfFemaleNum -= 1
        }
      }
    }
  }
  item.halfFlag = item.halfFlag ? 1 : 0
  calculate(1)
}
onMounted(() => {
  getActivityList()
})

const getActivityList = () => {
  activityService.getRecord({
    id: activityId.value
  }).then(res => {
    if (res) {
      res = res.data
      groupProp.value = res
      computeNum.value = groupProp.value.joinNum
      activityParticipateList.value = res.activityParticipatorVos
      activityParticipateList.value.forEach(item => {
        if (groupProp.value.settlementFlag === 0) {
          if (item.sex === 1) {
            groupProp.value.fullMaleNum ? groupProp.value.fullMaleNum += 1 : groupProp.value.fullMaleNum = 1
          } else {
            groupProp.value.fullFemaleNum ? groupProp.value.fullFemaleNum += 1 : groupProp.value.fullFemaleNum = 1
          }
        }
      })
      // if (groupProp.value.settlementFlag === 0) {
      calculate(0)
      // }

    }
  })
}

const updateActivity = () => {
  groupProp.value.settlementFlag = 1
  groupProp.value.activityParticipatorDtos = activityParticipateList.value
  groupProp.value.txtContent = null;
  groupProp.value.activityParticipatorVos = [];
  activityService.updateRecord(groupProp.value
  ).then(res => {
    proxy.$modal.msgSuccess('修改活动记录成功')
    router.push({path: '/group/actRecord', query: {groupId: AES_Encrypt(groupId.value)}});
  })
}

const copy = () => {
  let result = "";
  activityParticipateList.value.forEach(el => {
    result += el.userName + ': ' + (el.sex === 1 ? '男 ' : '女 ') + el.cost + '\n'
  })
  toClipboard(result).then(() => {
    proxy.$modal.msgSuccess('复制成功');
  })
}
</script>

<style lang="scss" scoped>
.app-container {
  min-height: 100vh;
}

:deep(.van-pagination__item--disabled) {
  opacity: 1;
}

.item-box:nth-of-type(odd) {
  background: #606365;
  color: #6bca44;
}

.item-box:nth-of-type(even) {
  background: #235440;
  color: #6bca44;
}

.justify-content {
  display: flex;
  justify-content: space-between;
}
</style>